<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <welcome>
            <template slot="s1">
              <p>我是p1标签</p>
              <p>我是p2标签</p>
          </template>

            <template slot="s2">
            <p>我是p3标签</p>
            <p>我是p4标签</p>
          </template>

        </welcome>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        Vue.component('welcome', {
            template: `
        <div style="width:500px;height:300px;border:1px solid red;">
          <slot name='s1'></slot>
          <h1>欢迎光临</h1>
          <slot name='s2'></slot>
        </div>
      `,
            data: function() {
                return {}
            },
            methods: {}
        })
        var vm = new Vue({
                el: '#app'
            })
            /**
            运行代码, 观察, 看看 我是p1标签, 我是p2标签 能够显示在界面中吗?
            如果不能, 那么如何能够将 
              我是p1标签 我是p2标签 显示在子组件欢迎光临文字的上方
              我是p3标签 我是p4标签 显示在子组件欢迎光临文字的下方呢?
            **/
    </script>
</body>

</html>